<script>
import json from './addCardAndAddress/country-code.json'
import addCardAndAddress from "./addCardAndAddress";
export default {
  name: "billing-address",
  props: ['billingData'],
  components: {
    addCardAndAddress
  },
  data () {
    return {
      loading: true,
      visible: false,
      countryList: json
    }
  },
  watch: {
    billingData () {
      this.loading = false
    }
  },
  computed: {
    existAddress () {
      return this.billingData.customer && this.billingData.customer.billing_address && this.billingData.customer.billing_address.country
    },
    address () {
      return this.billingData.customer.billing_address
    }
  },
  methods: {
    addAddress () {
      this.visible = true
    },
    handleCommand (command, item) {
      if (command === 'Edit') {
        this.addAddress()
      }
    },
    success () {
      this.loading = true
      this.$emit('refreshBilling')
    }
  }
}
</script>

<template>
  <div class="address" v-loading="loading">
    <div class="address-title">Billing Address</div>
    <div class="address-tip">Manage billing address for all billing communication.</div>
    <div class="address-add" @click="addAddress" v-if="!existAddress">+ ADD NEW</div>
    <div class="address-info" v-if="existAddress">
      <span class="el-icon-location-outline"></span>
      <div class="h">
        {{address.first_name}} {{address.last_name}}<br/>
        {{address.line1}}<br/>
        {{address.line2}}<br v-if="address.line2"/>
        {{address.city}}, {{address.state}}, {{address.zip}}<br/>
        {{countryList.find(item => item.code === address.country).name}}
      </div>
    </div>
    <el-dropdown trigger="click" @command="handleCommand">
      <span class="more" v-show="existAddress"><i class="el-icon-more"></i></span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="Edit">Edit</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <addCardAndAddress dialog-type="address" :visible.sync="visible" :billingData="billingData" :onlyAddress="true" @success="success"/>
  </div>
</template>

<style scoped lang="scss">
.address {
  width: 268px;
  margin-top: 16px;
  padding: 16px;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #DDE1E6;
  background: #FBFBFB;
  position: relative;
  &-title{
    font-size: 16px;
    font-weight: bold;
    color: #262626;
    line-height: 24px;
  }
  &-tip{
    color: #8D8D8D;
    line-height: 14px;
    font-size: 12px;
  }
  &-add {
    border: 1px solid #00000014;
    border-radius: 4px;
    margin-top: 12px;
    font-size: 14px;
    cursor: pointer;
    text-align: center;
    overflow: hidden;
    color: #000000;
    font-weight: bold;
    line-height: 32px;
    background: #fff;
  }
  &-info {
    margin-top: 12px;
    display: flex;
    .h {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.3;
    }
    span {
      font-size: 20px;
      margin-right: 8px;
      color: #0265DCFF;
    }
  }
  .el-dropdown {
    position: absolute;
    top: 15px;
    right: 15px;
    .more {
      cursor: pointer;
    }
  }
}
</style>